<template>
	<view class="container">
		<u-navbar
			title="乐推学院"
			:back-icon-size="28"
			back-icon-color="#000000"
			:title-size="28"
			:border-bottom="false"
			:back-text-style="{ color: '#000000', fontSize: '26rpx' }"
			title-color="#000000"
			:custom-back="goback"
			:background="background"
		></u-navbar>
		<view class="lt_card">
			<u-search placeholder="搜索讲师丶课程" v-model="keyword" :input-style="{ height: '52rpx' }" :action-style="searchsty" @search="dosearch" @custom="dosearch"></u-search>
			<!-- banner -->
			<u-swiper :list="bannerlist" @click="gobanner"></u-swiper>
			<!-- 功能区 -->
			<!-- 	<view class="lt_card">
				<view class="card_body"> -->
			<u-grid :col="4" :border="false" @click="gridgo">
				<u-grid-item v-for="(item, index) in classList" :key="index" :index="index">
					<image :src="item.icon" style="width: 55px;height: 55px;"></image>
					<view class="grid-text" style="font-size: 26rpx;">{{ item.title }}</view>
				</u-grid-item>
			</u-grid>
			<!-- 	</view>
			</view> -->
			<!-- 新闻 -->
			<view class="news u-flex">
				<text class="newstext">乐推头条</text>
				<u-notice-bar class="u-flex-1" :volume-icon="false" :font-size="26" color="#101010" mode="vertical" type="none" :duration="5000" :list="textlist"></u-notice-bar>
			</view>
		</view>
		<view class="course">
			<view class="getmore" @click="gridgo('more')">更多课程</view>
			<u-tabs-swiper
				ref="uTabs"
				:list="list"
				:is-scroll="true"
				:current="current"
				@change="tabsChange"
				:swiperWidth="750"
				:bar-height="6"
				:bar-width="130"
				:width="190"
				:height="100"
				:gutter="40"
				:font-size="28"
				active-color="rgb(0, 0, 0)"
				activebg-color="rgb(0, 0, 0)"
				:bold="true"
				:bar-style="barsty"
				:active-item-style="activesty"
			></u-tabs-swiper>

			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<!-- 热门课程 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="scroll1">
							<view class="coursebox" v-for="(item, index) in beginnerList" :key="index">
								<image class="courimg" :src="item.curriculum_img" mode=""></image>
								<text class="u-line-2">{{ item.curriculum_title }}</text>
								<text class="take">已有 999+ 订阅</text>
							</view>
							<view style="width: 320rpx;height: 0;" v-if="beginnerList.length % 2 != 0"></view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 初级课程 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="scroll1">
							<view class="coursebox" v-for="(item, index) in beginnerList" :key="index">
								<image class="courimg" :src="item.curriculum_img" mode=""></image>
								<text class="u-line-2">{{ item.curriculum_title }}</text>
								<text class="take">已有 999+ 订阅</text>
							</view>
							<view style="width: 320rpx;height: 0;" v-if="beginnerList.length % 2 != 0"></view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 进阶课程 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="scroll1">
							<view class="coursebox" v-for="(item, index) in advancedList" :key="index">
								<image class="courimg" :src="item.curriculum_img" mode=""></image>
								<text class="u-line-2">{{ item.curriculum_title }}</text>
								<text class="take">已有 999+ 订阅</text>
							</view>
							<view style="width: 320rpx;height: 0;" v-if="advancedList.length % 2 != 0"></view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<view class="offline">
			<text class="offtext">线下活动</text>
			<image
				class="offlineimg"
				src="//img.letuilm.com/2020/10/e7f5be2020102716065612581.png"
				mode=""
			></image>
			<u-grid :col="3" :border="false" @click="gridgo">
				<u-grid-item v-for="(item, index) in classList2" :key="index" :index="index">
					<image class="courimg" src="//img.letuilm.com/2020/10/50eeb02020102716061124265.png" style="width: 100px;height: 100px;"></image>
					<view class="grid-text" style="font-size: 28rpx;font-weight: 600;color: #101010;">{{ item.title }}</view>
				</u-grid-item>
			</u-grid>
			<u-swiper :list="bannerlist" @click="gobanner"></u-swiper>
		</view>
		<u-divider :fontSize="28" color="gray" bg-color="#F2F2F2" :height="80">学习提升价值</u-divider>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	data() {
		return {
			beginnerList: [
				// {
				// 	class_id: 10005,
				// 	curriculum_desc: '测试',
				// 	curriculum_img: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1610542142,718703573&fm=26&gp=0.jpg',
				// 	curriculum_title: '测试',
				// 	id: 4,
				// 	ppt_url: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1610542142,718703573&fm=26&gp=0.jpg',
				// 	type: 2,
				// 	video_url: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1610542142,718703573&fm=26&gp=0.jpg	'
				// }
			],
			advancedList: [
				// {
				// 	class_id: 10005,
				// 	curriculum_desc: '测试',
				// 	curriculum_img: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1610542142,718703573&fm=26&gp=0.jpg',
				// 	curriculum_title: '测试',
				// 	id: 4,
				// 	ppt_url: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1610542142,718703573&fm=26&gp=0.jpg',
				// 	type: 2,
				// 	video_url: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1610542142,718703573&fm=26&gp=0.jpg	'
				// }
			],
			courseList: [
				{
					img:
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600688634856&di=f63c45f296ed92194bb7b9e770955cf9&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Fback_pic%2F04%2F98%2F34%2F0159390460ed9e9.jpg',
					title: '业务开展难?第2期线上精品程帮你突破！',
					num: '999+'
				},
				{
					img:
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600688634856&di=f63c45f296ed92194bb7b9e770955cf9&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Fback_pic%2F04%2F98%2F34%2F0159390460ed9e9.jpg',
					title: '业务开展难?第2期线上精品程帮你突破！',
					num: '999+'
				},
				{
					img:
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600688634856&di=f63c45f296ed92194bb7b9e770955cf9&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Fback_pic%2F04%2F98%2F34%2F0159390460ed9e9.jpg',
					title: '业务开展难?第2期线上精品程帮你突破！',
					num: '999+'
				},
				{
					img:
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600688634856&di=f63c45f296ed92194bb7b9e770955cf9&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Fback_pic%2F04%2F98%2F34%2F0159390460ed9e9.jpg',
					title: '业务开展难?第2期线上精品程帮你突破！',
					num: '999+'
				}
			],
			activesty: {
				// fontSize: '36rpx'
			},
			barsty: {},
			tabs: [
				{
					name: '热门课程'
				},
				{
					name: '初级课程'
				},
				{
					name: '进阶课程'
				}
			],
			list: [
				{
					name: '热门课程'
				},
				{
					name: '初级课程'
				},
				{
					name: '进阶课程'
				}
			],
			current: 0, // tabs组件的current值，表示当前活动的tab选项
			swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			textlist: ['乐推招商系统APP版本上线啦~', '乐推招商系统APP版本上线啦~'],
			searchsty: {
				width: '118rpx',
				height: '54rpx',
				lineHeight: '54rpx',
				backgroundColor: '#FFDB28',
				borderRadius: '60rpx',
				color: '#ffffff'
			},
			keyword: '',
			// 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
			// 导航栏内容区域高度，不包括状态栏高度在内
			navbarHeight: 44,
			background: {
				background: '#ffffff'
			},
			bannerlist: [
				{
					image:
						'http://img-haodanku-com.cdn.fudaiapp.com/0_5593420415_1601374548.jpg',
					redirect: 'www.baodu.com'
				}
			],
			classList: [
				{
					icon: 'http://school.chaojimengzhu.cn/themes/video-1/public/images/index-1.png',
					title: '预定讲师'
				},
				{
					icon: 'http://school.chaojimengzhu.cn/themes/video-1/public/images/index-2.png',
					title: '讲师查询'
				},
				{
					icon: 'http://school.chaojimengzhu.cn/themes/video-1/public/images/index-3.png',
					title: '成为讲师'
				},
				{
					icon: 'http://school.chaojimengzhu.cn/themes/video-1/public/images/index-4.png',
					title: '乐推百科'
				}
			],
			classList2: [
				{
					icon: 'star-fill',
					title: '产品推介会'
				},
				{
					icon: 'phone',
					title: '导师团队'
				},
				{
					icon: 'star-fill',
					title: '未来导师'
				}
			],

			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			latelyList: [],
			flag: '',
			timelist: []
		};
	},
	//触底加载
	// onReachBottom() {
	// 	// if(this.page >= 3) return ;
	// 	this.status = 'loading';
	// 	// this.page = ++ this.page;
	// 	setTimeout(() => {
	// 		this.$u.toast('加载成功!');
	// 		// this.list += 10;
	// 		// if(this.page >= 3) this.status = 'nomore';
	// 		// else this.status = 'loading';
	// 		this.status = 'nomore';
	// 	}, 2000);
	// },
	onLoad(option) {},
	onReady() {
		this.getcurrclass();
	},
	onShow() {},
	methods: {
		dosearch(val){
			uni.navigateTo({
				url: '/pages/college/searchleturse/searchleturse?search='+val,
				animationType: 'pop-in',
				animationDuration: 300
			});
		},
		//获取课程分类
		getcurrclass() {
			this.$u.api
				.getcurrclass()
				.then(res => {
					console.log('课程分类', res);
					for (let i in res.data) {
						if (i < 5) {
							this.getcurrlist(res.data[i]);
						}
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		//获取课程列表
		getcurrlist(item) {
			this.$u.api
				.getcurrlist({
					page: 1,
					pagesize: 999,
					class_id: item.id
					// desc:1,//1=降序 2升序
				})
				.then(res => {
					if (res.code == 200) {
						// console.log('课程列表',res);
						if (res.data.data) {
							switch (item.name) {
								case '基础':
									this.beginnerList.push.apply(this.beginnerList, res.data.data);
									// console.log('基础',this.beginnerList)
									break;
								case '技能':
									this.beginnerList.push.apply(this.beginnerList, res.data.data);
									// console.log('技能',this.beginnerList)
									break;
								case '实操':
									this.beginnerList.push.apply(this.beginnerList, res.data.data);
									// console.log('实操',this.beginnerList)
									break;
								case '团建':
									this.advancedList.push.apply(this.advancedList, res.data.data);
									// console.log('团建',this.advancedList)
									break;
								case '扩展':
									this.advancedList.push.apply(this.advancedList, res.data.data);
									// console.log('扩展',this.advancedList)
									break;
								default:
									// console.log('默认',this.advancedList)
									break;
							}
						}
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		gridgo(index) {
			// console.log(index);
			switch (index) {
				case 0:
					uni.navigateTo({
						url: '/pages/college/leturse/sublecturer',
						animationType: 'pop-in',
						animationDuration: 300
					});
					break;
				case 1:
					uni.navigateTo({
						url: '/pages/college/leturse/searchleturse',
						animationType: 'pop-in',
						animationDuration: 300
					});
					break;
				case 2:
					uni.navigateTo({
						url: '/pages/college/apply/apply',
						animationType: 'pop-in',
						animationDuration: 300
					});
					break;
				case 3:
					uni.navigateTo({
						url: '/pages/college/encyclopedias/encyclopedias',
						animationType: 'pop-in',
						animationDuration: 300
					});
					break;		
				case 'more':
					uni.navigateTo({
						url: '/pages/college/morecourse/morecourse',
						animationType: 'pop-in',
						animationDuration: 300
					});
					break;
			}
		},
		goback() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		gobanner(index) {
			console.log(this.bannerlist[index]);
		},
		getbannerlist() {
			this.$u.api.getbannerlist().then(res => {
				this.bannerlist = [];
				for (let i in res.data) {
					let obj = {
						image: res.data[i].url,
						redirect: res.data[i].redirect
					};
					this.bannerlist.push(obj);
				}
			});
		},
		// tabs通知swiper切换
		tabsChange(index) {
			this.swiperCurrent = index;
			console.log(index);
		},
		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition(e) {
			let dx = e.detail.dx;
			this.$refs.uTabs.setDx(dx);
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			let current = e.detail.current;
			this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
			// console.log('current--', current);
			// if (current == 0) {
			// 	this.getactivitylist();
			// 	this.getactivityinfo();
			// }
			// else if (current == 1) {
			// 	// this.getexaminegoods()
			// } else {
			// 	this.getadoptgoods()
			// }
		},
		// scroll-view到底部加载更多
		onreachBottom() {
			console.log('触底');
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	font-size: 32rpx;
	background-color: $lt-bg;
	.lt_card::v-deep {
		background-color: #ffffff;
		padding: 0 24rpx;
		.u-search {
			padding: 20rpx 0;
		}
		.uni-input-placeholder {
			left: 0rpx;
		}
		.uni-input-input {
			text-indent: 0rpx;
		}
		.news {
			.newstext {
				display: block;
				width: 140rpx;
				color: #fced83;
			}
			.u-swiper-item {
				font-weight: 600;
			}
		}
	}
	.course {
		position: relative;
		margin: 30rpx 0;
		.getmore {
			position: absolute;
			top: 0;
			right: 0;
			width: 170rpx;
			height: 100rpx;
			line-height: 100rpx;
			padding: 0px 20rpx;
			color: rgb(48, 49, 51);
			z-index: 3;
			font-weight: normal;
			font-size: 28rpx;
		}
		.swiper-box {
			height: 638rpx;
			background-color: #ffffff;
			padding-bottom: 20rpx;
			.scroll1 {
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
				.coursebox {
					padding-top: 20rpx;
					.courimg {
						width: 318rpx;
						height: 168rpx;
						border-radius: 12rpx;
					}
					.u-line-2 {
						padding-top: 20rpx;
						width: 318rpx;
						color: rgba(16, 16, 16, 1);
						font-size: 12px;
					}
					.take {
						font-size: 8px;
						color: gray;
					}
				}
			}
		}
	}
	.offline {
		background-color: #ffffff;
		padding: 20rpx;
		.offtext {
			// margin-bottom:24rpx
		}
		.offlineimg {
			width: 700rpx;
			height: 254rpx;
			margin-top: 24rpx;
		}
	}
}
</style>
